<template>
    <div class="gold-shop-wrap">
        <van-nav-bar title="我的软件" left-arrow fixed @click-left="onClickLeft" :right-text="software.repeat_status==0?'':'软件复购'"
            @click-right="onClickRight" />
        <div class="my-software-top">软件出售</div>
        <div>
            <van-form @submit="onSubmitSoft" error-message-align="right">
                <van-field v-model="software.level_name" name="level_name" label="当前级别:" placeholder="请输入当前级别" readonly
                    input-align="right" />
                <van-field v-model="software.quantity" name="quantitys" label="剩余库存:" placeholder="请输入剩余库存" readonly
                    input-align="right" />
                <van-field v-model="account" label-width='2rem' name="account" label="购买软件用户:" placeholder="请输入对方手机号" input-align="right"
                    :rules="[{ required: true, message: '请输入对方手机号' }]" />
                <van-field v-model="quantity" label-width='2rem' name="quantity" label="出售软件数量:" placeholder="请选择出售软件数量" is-link
                    input-align="right" :rules="[{ required: true, message: '请选择出售软件数量' }]" readonly @click="showPopupSoft=true"/>
                    <van-field v-model="levels_names" label-width='2rem' name="levels_names" label="设置对方身份:" placeholder="请选择"
                    input-align="right" :rules="[{ required: true, message: '请选择' }]" readonly @click="showPopuplevel=true" is-link/>
                <div style="margin: 16px;margin-top: 0.92rem;">
                    <van-button color="linear-gradient(to right, #FF5851, #E9011B)" round block type="info"
                        native-type="submit">确认出售</van-button>
                </div>
            </van-form>
            <div class="my-software-tips">
                <div class="my-software-tips-title" v-if="software.rule">{{software.rule.title}}</div>
                <div class="my-software-tips-content" v-if="software.rule" v-html="software.rule.content.replace(/\n/g, '<br>')">
                </div>
            </div>
        </div>
        <van-popup v-model="showPopupSoft" position="bottom">
            <van-picker show-toolbar :columns="columns"
             @confirm="onConfirm" @cancel="showPopupSoft = false" :value="quantity"/>
        </van-popup>
        <!-- 选择对方身份 -->
        <van-popup v-model="showPopuplevel" position="bottom">
            <van-picker show-toolbar :columns="columnslevel"
             @confirm="onConfirmlevel" @cancel="showPopuplevel = false" :value="level"/>
        </van-popup>
        <van-popup
      v-model="showPopup"
      round
      closeable
      @click-close-icon="closeClick"
      position="bottom"
      class="balance-pay-popup-wrap"
      :style="{ height: showKeyboard ? '450px' : '250px' }"
    >
      <div class="title">确认支付</div>
      <!-- 交易密码 -->
      <div class="row border-none">
        <span class="desc">请输入支付密码:</span>
      </div>
      <div class="row border-none">
        <van-password-input
          :value="tradePassword"
          :focused="showKeyboard"
          @focus="handleShowKeyboard"
        ></van-password-input>
        <van-number-keyboard
          v-model="tradePassword"
          :show="showKeyboard"
          :maxlength="maxlength"
          :hide-on-click-outside="false"
          @input="onPasswordInput"
          @delete="onPasswordDelete"
          @blur="showKeyboard = false"
        ></van-number-keyboard>
      </div>
    </van-popup>
    </div>
</template>
<script>
import {SOFTWARE_INFO,SOFTWARE_TRANSFER} from '@/api/mine'
import { Dialog } from 'vant';
export default{
    data() {
        return {
            // username:'',
            software:{},
            account:'',
            quantity:'',
            columns:[1,10],
            showPopupSoft:false,
            showPopup:false,
      maxlength: 6,
      showKeyboard: false,
      tradePassword: "",
      completePassword: false,
      showPopuplevel:false,
      columnslevel:[
        {
          id:0,
          text:'商家'
        },
        {
          id:1,
          text:'经理'
        }
      ],
      level:null,
      levels_names:""

        }
    },
    mounted() {
      window.scrollTo(0, 0)
        this.initData()
        // this.active=this.$route.query.id
    },
    methods:{
        initData(){
            this.$http.get(SOFTWARE_INFO).then(res=>{
            this.software=res.data
        })
        },
        onClickLeft() {
            this.$router.back()
        },
        // 选择数量
        onConfirm(value){
            this.quantity=value
            this.showPopupSoft=false
        },
        // 选择对方身份
        onConfirmlevel(value){
          this.level=value.id
          this.levels_names=value.text
          this.showPopuplevel=false
        },
        onClickRight(){
           this.$router.push({name:'repurchase',
        //    query:{
        //     level:this.software.user_level,
        //     repeat_price:this.software.repeat_price,
        //     quantity:this.software.quantity,
        //     level_name:this.software.level_name
        // }
        })
        },
        onSubmitSoft(values){
            this.showPopup=true
        },
        handleShowKeyboard() {
      this.tradePassword = "";
      this.completePassword = false;
      this.showKeyboard = true;
    },
    onPasswordInput(t) {
      (this.tradePassword = (this.tradePassword + t).slice(0, this.maxlength)),
        this.tradePassword.length !== this.maxlength ||
          this.completePassword ||
          ((this.completePassword = !0), this.onSubmit());
    },
    onPasswordDelete() {
      this.tradePassword &&
        ((this.tradePassword = this.tradePassword.slice(
          0,
          this.tradePassword.length - 1
        )),
        (this.completePassword = this.tradePassword.length === this.maxlength));
    },
    closeClick(){
        this.showPopup = false;
        this.tradePassword='';
        this.completePassword=''
    },
    onSubmit() {
      if (this.loading) {
        return;
      }
      this.loading = true;
      let params = {
        account: this.account,
        quantity:this.quantity,
        pay_password:this.tradePassword,
        level:this.level,
      };
      this.$http.post(SOFTWARE_TRANSFER, params)
      .then(() => {
          this.loading = false;
          this.showPopup = false;
          this.$toast.success('转赠成功');
          this.quantity=''
          this.account=''
          this.level=''
          this.levels_names=''
          this.pay_password=''
        this.tradePassword='';
        this.completePassword=''
        //   this.$emit('refreshData');
            this.initData()


      })
      .catch(() => {
          this.loading = false;
      })
}
    }
}
</script>
<style lang="scss" scoped>
.gold-shop-wrap {
    // min-height: 100vh;
    padding-top: 46px;
    // background: #F2F4F5;

    ::v-deep .van-nav-bar .van-icon {
        color: #333333;
    }

    ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }

    ::v-deep .van-nav-bar__text {
        color: #333;
    }
}

.my-software-top {
    // padding: 0.2rem;
    width: 95%;
    margin: 0.2rem auto;
    box-sizing: border-box;
    font-size: 0.32rem;
    font-weight: bold;
}

.my-software-tips {
    // text-align: center;
    width: 95%;
    margin: 0 auto;
    margin-top: 0.64rem;
    font-size: 0.28rem;

    // line-height: 0.5rem;
    &-title {
        font-weight: bold;
        // font-size: 0.3rem;
        margin-bottom: 0.3rem;
    }

    &-content {
        color: #666666;
        font-size: 0.24rem;
    }
}
.balance-pay-popup-wrap {
  display: flex;
  -webkit-box-orient: vertical;
  flex-direction: column;
  text-align: center;
  padding: 0.32rem;
  box-sizing: border-box;
  .title {
    color: #1b1b1b;
    font-size: 0.36rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
  }
  .row {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #ebedf0;
    &.border-none {
      border: none;
    }
  }
  .van-password-input {
    width: 100%;
    margin: 0;
  }
}
</style>
